<!-- 详情页 -->
<template>
  <div id="detail">
    <!-- 顶部导航 -->
    <detail-nav-bar
      :currentIndex="currentIndex"
      :centerList="['商品', '详情', '参数', '推荐']"
      @topBarClick="topBarClick"
    ></detail-nav-bar>
    <!-- 滚动页面  -->
    <scroll
      class="wrapper"
      ref="scroll"
      :probeType="3"
      :listenScroll="true"
      @scroll="scroll"
    >
      <!-- 图片预览插件 -->
      <photo-preview>
        <!-- 轮播图 -->
        <swiper
          height="400px"
          :options="{
            autoplayTime: 3000, // 轮播间隔时间，默认3s
            loop: false // 是否循环轮播
          }"
          :list="goodsShowImg"
        ></swiper>
      </photo-preview>
      <!-- 商品基本信息展示 -->
      <detail-base-info class="m-b-10" :baseInfo="goodsBaseInfo">
      </detail-base-info>
      <!-- 服务标签 -->
      <detail-service-tags
        class="m-b-10"
        :list="serviceTags"
        @click.native="isServiceDialog = true"
      ></detail-service-tags>
      <!-- 商品sku -->
      <detail-goods-sku class="m-b-10" @click.native="isSkuDialog = true">
        <span>{{ skuSelected }}</span>
      </detail-goods-sku>
      <!-- 商品评价 -->
      <detail-evaluation class="m-b-10"></detail-evaluation>
      <!-- 商品店铺 -->
      <detail-shop class="m-b-10" :shop="shop"></detail-shop>
      <!-- 商品简介 -->
      <detail-goods-desc :desc="goodsDesc" ref="desc"></detail-goods-desc>
      <!-- 商品详情 -->
      <photo-preview>
        <detail-goods-info
          class="m-b-10"
          :list="graphicDetails"
          ref="info"
        ></detail-goods-info>
      </photo-preview>
      <!-- 商品参数 -->
      <detail-goods-params class="m-b-10" :list="goodsParams" ref="params">
      </detail-goods-params>
      <!-- 商品推荐 -->
      <h3 style="padding: 0 10px;">本店同类商品</h3>
      <goods-list
        :list="goodsRecommend"
        ref="recommend"
        @goodsItemClick="goodsItemClick"
      ></goods-list>
    </scroll>
    <!-- 回到顶部 -->
    <back-top v-show="isShowBackTop" @click.native="backTopClick"></back-top>
    <!-- 底部选项卡 -->
    <detail-foot-bar></detail-foot-bar>
    <!-- 服务说明 -->
    <dialog-bottom
      :isShow="isServiceDialog"
      :duration="800"
      @clickDialogMask="isServiceDialog = false"
    >
      <detail-service-explain :list="serviceTags"></detail-service-explain>
    </dialog-bottom>
    <dialog-bottom
      :isShow="isSkuDialog"
      :duration="400"
      @clickDialogMask="isSkuDialog = false"
    >
      <detail-sku-options
        @showSelected="showSelected"
        @shopCartClick="shopCartClick"
        @buyClick="buyClick"
      ></detail-sku-options>
    </dialog-bottom>
  </div>
</template>

<script>
import { debounce } from "common/utils";
import { getGoodsDetail } from "network/detail";

import Scroll from "components/common/scroll/Scroll";
import Swiper from "components/common/swiper/Swiper";
import DialogBottom from "components/common/dialog/DialogBottom";
import PhotoPreview from "components/common/preview/PhotoPreview";
import GoodsList from "components/content/goods/GoodsList.vue";
import BackTop from "components/content/backTop/BackTop.vue";

import DetailNavBar from "./childComps/DetailNavBar";
import DetailFootBar from "./childComps/DetailFootBar";
import DetailBaseInfo from "./childComps/DetailBaseInfo";
import DetailServiceTags from "./childComps/DetailServiceTags";
import DetailServiceExplain from "./childComps/DetailServiceExplain";
import DetailGoodsSku from "./childComps/DetailGoodsSku";
import DetailEvaluation from "./childComps/DetailEvaluation";
import DetailGoodsDesc from "./childComps/DetailGoodsDesc";
import DetailGoodsInfo from "./childComps/DetailGoodsInfo";
import DetailGoodsParams from "./childComps/DetailGoodsParams";
import DetailShop from "./childComps/DetailShop.vue";
import DetailSkuOptions from "./childComps/DetailSkuOptions.vue";

export default {
  name: "Detail",
  data() {
    return {
      id: null,
      // 商品数据
      goodsShowImg: [],
      goodsBaseInfo: {},
      serviceTags: [],
      shop: {},
      goodsDesc: "",
      graphicDetails: [],
      goodsParams: [],
      goodsRecommend: [],
      // 顶部导航栏索引
      currentIndex: 0,
      // 商品,详情,参数,推荐组件的y值
      themeTopY: [0, 0, 0, 0],
      // 是否显示回到顶部按钮
      isShowBackTop: false,
      // 是否显示服务说明
      isServiceDialog: false,
      // 是否显示sku选项卡
      isSkuDialog: false,
      skuSelected: "请选择: "
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.getGoodsDetail(this.id);
  },
  mounted() {
    this.imgload();
    this.getThemeTopY();
  },
  updated() {},
  activated() {
    console.log("-----", this.id);
  },
  components: {
    DetailNavBar,
    DetailFootBar,
    Swiper,
    Scroll,
    DetailBaseInfo,
    DetailServiceTags,
    DialogBottom,
    DetailServiceExplain,
    PhotoPreview,
    DetailGoodsSku,
    DetailEvaluation,
    DetailGoodsDesc,
    DetailGoodsInfo,
    DetailGoodsParams,
    GoodsList,
    BackTop,
    DetailShop,
    DetailSkuOptions
  },
  methods: {
    /**
     * 重复的封装
     */
    scrollRefresh() {
      // scroll组件容易卡住,刷新插件
      this.$refs.scroll.refresh();
    },
    getThemeTopY() {
      // 获取商品,详情,参数,推荐组件距离顶部的距离
      this.themeTopY = [];
      this.themeTopY.push(0);
      this.themeTopY.push(-(this.$refs.desc.$el.offsetTop - 10));
      this.themeTopY.push(-(this.$refs.params.$el.offsetTop - 10));
      this.themeTopY.push(-(this.$refs.recommend.$el.offsetTop - 10 - 21));
      this.themeTopY.push(-Infinity);
      // console.log(this.themeTopY);
    },
    imgload() {
      // 监听是否商品图片加载完毕
      let count = 0;
      this.$bus.$on("goodsImageLoad", res => {
        if (res.path == this.$route.path) {
          if (count++ % 4 == 0) {
            try {
              this.scrollRefresh();
              this.getThemeTopY();
            } catch (err) {
              // console.log(err);
            }
          }
        }
      });
    },
    /**
     * 事件
     */
    scroll(e) {
      // scroll组件滚动事件
      // 多会显示回到顶部图标
      this.isShowBackTop = -e.y >= 800;
      // 滑动到指定位置,顶部导航变色
      for (let index = 0; index < this.themeTopY.length - 1; index++) {
        if (
          index !== this.currentIndex &&
          e.y <= this.themeTopY[index] &&
          e.y > this.themeTopY[index * 1 + 1]
        ) {
          this.currentIndex = index;
        }
      }
    },
    topBarClick(index) {
      // 顶部导航栏点击后滑动到指定位置
      this.getThemeTopY();
      this.$refs.scroll.scrollTo(0, this.themeTopY[index], 400);
    },
    backTopClick() {
      // 单击回到顶部按钮事件
      this.$refs.scroll.scrollTo(0, 0, 400);
    },
    showSelected(selected) {
      // 用户选择sku的变化
      this.skuSelected = selected;
    },
    goodsItemClick(goods) {
      // 点击商品事件,跳转到详情页
      this.$router.push({
        path: "/detail",
        query: {
          id: goods.id
        }
      });
    },
    shopCartClick(e) {
      // 加入购物车
      // console.log(e);
      // 把数据传回服务器
      this.$toast.show("加入购物车成功");
    },
    buyClick(e) {
      // 立即购买
      // console.log(e);
      // 跳转到订单页面
    },
    /**
     * 网络请求
     */
    getGoodsDetail(id) {
      getGoodsDetail(id).then(res => {
        const result = res.data;
        // console.log(result);
        if (result) {
          this.goodsShowImg = result.goodsShowImg.map(item =>
            item.replace(/_100x100.jpg/, "_750x1000.v1cAC.81.jpg")
          );
          this.goodsBaseInfo = result.goodsInfo;
          this.serviceTags = result.serviceTags;
          this.shop = result.shop;
          this.goodsDesc = result.goodsDesc;
          this.graphicDetails = result.graphicDetails;
          this.goodsParams = result.goodsParams;
          this.goodsRecommend = result.goodsRecommend.map(item => {
            let url = item.url;
            item.id = url.slice(url.indexOf("detail") + 7, url.indexOf("?"));
            return item;
          });
        } else {
          // 数据不存在,跳转404页面
          this.$router.replace({
            path: "/404"
          });
        }
      });
    }
  }
};
</script>

<style scoped>
#detail {
  height: 100vh;
}
.m-b-10 {
  margin-bottom: 10px;
}
.wrapper {
  height: calc(100% - 44px - 50px);
  overflow: hidden;
}
</style>
